<template>
    <div class="barcode-wrapper" ref="wrapper">
        <div class="barcode-div">
            <svg ref="svg" class="barcode" preserveAspectRatio="none"></svg>
        </div>
    </div>
</template>
<script setup>
    import { ref, onMounted, watch, nextTick } from 'vue';
    import JsBarcode from 'jsbarcode';
    import * as uuid from 'uuid';
    import { barCodeType, barCodeHeight } from './opt';
    
    const props = defineProps({
        info:{ type:Object },
        labelWidth:{ type:Number }
    })
    const code = ref('');
    const emit = defineEmits(['passCode']);
    const wrapper = ref();
    const svg = ref();

    function freshBarCode(){
        try {
            let numBars;
            let codeLength = code.value.length;
    
            switch (barCodeType) {
                case 'EAN2':
                    numBars = 20;
                    break;
                case 'EAN5':
                    numBars = 47;
                    break;
                case 'EAN8':
                    numBars = 67;
                    break;
                case 'EAN13':
                case 'UPC':
                    numBars = 95;
                    break;
                case 'UPC_E':
                    numBars = 57;
                    break;
                case 'ITF':
                    numBars = codeLength * 3;
                    break;
                case 'ITF14':
                    numBars = 94;
                    break;
                case 'CODE39':
                case 'codabar':
                    numBars = codeLength * 12;
                    break;
                case 'CODE128':
                case 'CODE128A':
                case 'CODE128B':
                case 'CODE128C':
                    numBars = codeLength * 2;
                    break;
                case 'pharmacode':
                    numBars = codeLength * 10;
                    break;
                case 'MSI':
                case 'MSI10':
                case 'MSI11':
                case 'MSI1010':
                case 'MSI1110':
                    numBars = codeLength * 2.5;
                    break;
                default:
                    numBars = codeLength * 7;  // 默认设置
            }
            const container = wrapper.value;
            if ( !container ) return;
            const barWidth = container.offsetWidth / numBars;
            // console.log('containerWidth...', container.offsetWidth );
            // console.log('barWidth...', barWidth);
            JsBarcode('.barcode', code.value, {
                format:barCodeType, // 选择要使用的条形码类型
                width:barWidth,  // 设置条之间的宽度
                height:barCodeHeight, //高度
                displayValue:false,//是否在条形码下方显示文字
                //text:"456",//覆盖显示的文本
                //fontOptions:"bold italic",//使文字加粗体或变斜体
                //font:"fantasy",//设置文本的字体
                //textAlign:"left",//设置文本的水平对齐方式
                //textPosition:"top",//设置文本的垂直位置
                //textMargin:5,//设置条形码和文本之间的间距
                fontSize:14,//设置文本的大小
                //background:"#eee",//设置条形码的背景
                //lineColor:"#2196f3",//设置条和文本的颜色。
                margin:0//设置条形码周围的空白边距
            });
            // // JsBarCode函数会覆盖默认style,所以调用之后再手动设置一次style
            if ( svg.value ) {
                svg.value.style.height = '100%';
            }            
        } catch(e){
            console.log(e, '不支持的条形码内容')
        }
    }
    watch(()=>props.labelWidth, ()=>{
        freshBarCode();
    })
    onMounted(()=>{
        nextTick(()=>{
            code.value = props.info.checkCode;
            if ( !code.value ) {
                code.value = uuid.v4().slice(0, 16);
                nextTick(()=>{
                    emit('passCode', code);
                })
            }
            freshBarCode();
        })
    })    
</script>
<style lang="scss" scoped>
    .barcode-wrapper {
        background: white;
        flex-direction: column;
        display: flex;
        width:100%;
        height:100%;
    }
    .barcode-div {
        display: flex;
        width: 100%;
        max-width: 100%;
        height: 100%;
    }
</style>

